<template>
	<view>
		<div class="top">
			<div class="title">{{$t("当前绑定手机号")}}</div>
			<div class="currentPhone">{{ currentPhone }}</div>
		</div>
		<div class="content">
			<div class="form">
				<account-form ref="uForm" :codeType="codeType" :formData="formData" :formHigh="'300'" :rules="rules"
					@getFormData="getFormData">
				</account-form>
			</div>
		</div>
		<div class="btns">
			<u-button type="primary" @click="submit">{{$t("确定")}}</u-button>
			<u-button type="primary" plain @click="navBack">{{$t("取消")}}</u-button>
		</div>
	</view>
</template>

<script>
import AccountForm from '@/components/AccountForm.vue'
import { cellPhone } from '@/common/utils/index'
export default {
	name: "changePhone",
	components: {
		AccountForm
	},
	data() {
		return {
			codeType: "change",
			currentPhone: "",
			formData: [
				{
					type: 'primary',
					prop: "mobile",
					placeholder: '请输入手机号码'
				},
				{
					type: 'code',
					prop: "code",
					placeholder: '请输入短信验证码'
				},
			],
			rules: {
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.code(value, 6)
						},
						message: '请输入正确6位验证码',
						// 触发器可以同时用blur和change
						trigger: 'blur',
					},
				],
			},
		};

	},
	created() {
		this.getUserInfo()
		//加密手机号
		this.currentPhone = cellPhone(this.currentPhone)
	},
	methods: {
		getFormData(form) {
			this.changePhone(form)
		},
		changePhone(form) {
			this.$u.api.change_mobile(form).then(res => {
				console.log(res);
				const { msg, code } = res
				if (code === 1) {
					this.$u.toast(msg)
					setTimeout(() => {
						uni.redirectTo({
							url: './index'
						},500);
					})

				}
			})
		},
		getUserInfo() {
			this.$u.api.material().then(res => {
				this.currentPhone = cellPhone(res.data.data.mobile)
			})
		},
		submit() {
			this.$refs.uForm.submit()
		},

		navBack() {
			uni.navigateBack({
				delta: 1
			});
		}
	},
};
</script>

<style lang="scss" scoped>
.top {
	margin: 80rpx 0 56rpx;
	text-align: center;

	.title {
		color: #232323;
	}

	.currentPhone {
		margin-top: 20rpx;
		font-weight: bold;
		color: #0089ff;
		font-size: 40rpx;
	}
}

.content {
	margin: 0 50rpx;
}

.btns {
	margin: 70rpx auto 0;
	width: 600rpx;

	.u-btn {
		margin-bottom: 30rpx
	}
}
</style>
